<template>
  <div>
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit"
      label-width="100px"
    >
      <div class="divider">
        <span><em></em> 基本信息</span>
      </div>
      <el-row>
        <el-col :span="24">
          <el-form-item label="数据源名称" prop="name">
            <el-input v-model="dataForm.name" placeholder="数据源名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="数据源描述" prop="type">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6 }"
              placeholder="请输入内容"
              maxlength="300"
              v-model="dataForm.type"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="divider">
        <span><em></em> 运转时间</span>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="日期" prop="code">
            <el-date-picker
              v-model="dataForm.date"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="时间" prop="value">
            <el-time-select
              v-model="dataForm.date1"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30',
              }"
              placeholder="选择时间"
            >
            </el-time-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="运转周期" prop="orderNum">
            <el-select v-model="dataForm.orderNum" placeholder="运转周期">
              <el-option
                v-for="item in 5"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="divider">
        <span><em></em> 数据来源</span>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="数据源" prop="code">
            <el-select v-model="dataForm.date1" placeholder="数据源">
              <el-option
                v-for="item in 5"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据库" prop="value">
            <el-select v-model="dataForm.date1" placeholder="数据库">
              <el-option
                v-for="item in 5"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="数据表" prop="orderNum">
            <el-select v-model="dataForm.orderNum" placeholder="数据表">
              <el-option
                v-for="item in 5"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="divider">
        <span><em></em> 数据目标</span>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="数据源" prop="code">
            <el-select v-model="dataForm.date1" placeholder="数据源">
              <el-option
                v-for="item in 5"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据库" prop="value">
            <el-select v-model="dataForm.date1" placeholder="数据库">
              <el-option
                v-for="item in 5"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="addDataSource"
              circle
            ></el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="数据表" prop="orderNum">
            <el-select v-model="dataForm.orderNum" placeholder="数据表">
              <el-option
                v-for="item in 5"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="addDataTable"
              circle
            ></el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="tableList">
        <el-col :span="24">
          <el-form-item label="请选择目标-来源对应列">
            <el-table :data="dataForm.tableData" border style="width: 100%">
              <el-table-column
                prop="date"
                show-overflow-tooltip
                label="列名"
              ></el-table-column>
              <el-table-column
                prop="name"
                show-overflow-tooltip
                label="类型"
              ></el-table-column>
              <el-table-column
                prop="address"
                show-overflow-tooltip
                label="长度"
              >
              </el-table-column>
              <el-table-column
                prop="tableName"
                show-overflow-tooltip
                label="来源数据表列名"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'tableData.' + scope.$index + '.tableName'"
                    :rules="dataRule.tableName"
                  >
                    <el-select
                      size="mini"
                      v-model="scope.row.tableName"
                      placeholder="请选择"
                    >
                      <el-option v-for="i in 5" :key="i" :label="i" :value="i">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                show-overflow-tooltip
                label="类型"
              ></el-table-column>
              <el-table-column
                prop="address"
                show-overflow-tooltip
                label="长度"
              >
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </div>

    <!-- 弹窗, 新增 / 修改 -->
    <elDialog :dialog="dialog">
      <div :is="isName" @close="close" :detailsData="detailsData" />
    </elDialog>
  </div>
</template>

<script>
import elDialog from "@/components/common/dialog";
import dataSource from "./dataSource";
import dataTable from "./dataTable";
export default {
  props: {
    detailsData: Object
  },
  components: {
    elDialog,
    dataSource,
    dataTable
  },
  data() {
    return {
      isName: "",
      dialog: {
        show: false,
        title: "详情",
        width: "40%"
      },
      visible: false,
      dataForm: {
        id: 0,
        name: "",
        type: "",
        code: "",
        value: "",
        orderNum: "",
        remark: "",
        delFlag: "",
        tableData: []
      },
      dataRule: {
        tableName: [{ required: true, message: "不能为空", trigger: "change" }],
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        type: [{ required: true, message: "不能为空", trigger: "blur" }],
        code: [{ required: true, message: "不能为空", trigger: "blur" }],
        value: [{ required: true, message: "不能为空", trigger: "blur" }],
        orderNum: [{ required: true, message: "不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    addDataSource() {
      this.isName = "dataSource";
      this.dialog.title = "新增数据库";
      this.dialog.show = true;
    },
    addDataTable() {
      this.isName = "dataTable";
      this.dialog.title = "新增数据表";
      this.dialog.show = true;
    },
    close() {
      this.isName = "";
      this.dialog.show = false;
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$emit("close");
        }
      });
    }
  },
  watch: {
    detailsData: {
      handler(val) {
        this.dataForm = Object.assign({}, val);
        this.dataForm.tableData = [
          {
            date: "2016-05-04",
            name: "王小虎",
            address: " 1518 弄",
            tableName: ""
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: " 1517 弄",
            tableName: ""
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: " 1519 弄",
            tableName: ""
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: " 1516 弄",
            tableName: ""
          }
        ];
        console.log(val, 7878);
      },
      immediate: true
    }
  }
};
</script>
<style scoped lang="scss">
.el-form {
  .divider {
    font-size: 0.14rem;
    position: relative;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0.1rem;
    span {
      background: #1e202d;
      position: relative;
      padding: 0 0.1rem;
      z-index: 1;
      em {
        display: inline-block;
        width: 0.1rem;
        height: 0.1rem;
        border-radius: 50%;
        background: #3078ff;
      }
    }
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      background: #1f2b3d;
      top: calc(50% - 1px);
    }
  }
  .el-row {
    .el-col-12::v-deep {
      .el-form-item {
        .el-form-item__content {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          & > :first-child {
            width: 85%;
            margin-right: 2%;
          }
          .el-button {
            width: 0.3rem;
            height: 0.3rem;
          }
        }
      }
    }
  }
  .tableList::v-deep {
    .el-form-item {
      display: flex;
      flex-direction: column;
      .el-form-item__label {
        width: 100% !important;
        text-align: left;
      }
    }
    .el-table {
      // background: transparent;
      td,
      th.is-leaf {
        line-height: 0.2rem;
        padding: 0.05rem;
        border-bottom: 1px solid #32333a;
        border-right: 1px solid #32333a;
      }
      th,
      tr {
        background-color: transparent;
      }
    }
  }
}
</style>
